<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="DATAisUS Admin Panel" />
    <meta name="author" content="" />

    <title>Reporting</title>

    <link rel="stylesheet" href="../assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css">
    <link rel="stylesheet" href="../assets/css/font-icons/entypo/css/entypo.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
    <link rel="stylesheet" href="../assets/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/css/neon-core.css">
    <link rel="stylesheet" href="../assets/css/neon-theme.css">
    <link rel="stylesheet" href="../assets/css/neon-forms.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
    <link rel="stylesheet" href="../assets/css/white.css">
    <link rel="stylesheet" href="../assets/css/override.css">
    <link rel="stylesheet" href="../assets/css/fonts.css">

    <script src="../assets/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        function toggleFullScreen() {
            if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || document.mozFullScreenEnabled) {
                 if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                      (!document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement)) {
                    if (document.documentElement.requestFullScreen) {
                      document.documentElement.requestFullScreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                      document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullScreen) {
                      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                    } else if (this.msRequestFullscreen) {
                        this.msRequestFullscreen();
                    }
                  } else {
                    if (document.cancelFullScreen) {
                      document.cancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                      document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                      document.webkitCancelFullScreen();
                    }else if (document.msExitFullscreen) {
                      document.msExitFullscreen();
                    }
                  }
            } else {
              alert("Your browser does not support the fullscreen API.");
            }
        }
    </script>


    <!--- - jqwidgets CSS & JS Files- -->

    <link rel="stylesheet" href="../assets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../assets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../assets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.grouping.js"></script>    
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.export.js"></script>    
    <script type="text/javascript" src="../assets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../assets/jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../assets/scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                     { name: 'File_Name', type: 'string' },
                     { name: 'Asset_ID', type: 'string' },
                     { name: 'Trade_ID', type: 'string' },
                     { name: 'TimeStamp', type: 'string' },
                     { name: 'Field_Name', type: 'string' },
                     { name: 'Action', type: 'string' },
                     { name: 'Error', type: 'string' }
                ], 
                url: '../sampledata/reporting.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }
            });
            var cellClass = function (row, dataField, cellText, rowData) {
                var cellValue = rowData[dataField];
                switch (dataField) {
                    case "diffQuantity":
                        if (cellValue >100 || cellValue < 0) {
                            return "minavg";                            
                        }
                        if (cellValue <= 100 ) {
                            return "max";
                        }                       
                        return "max";
                        
                    case "diffMarketValue":
                        if (cellValue >100 || cellValue < 0) {
                            return "minavg";                            
                        }
                        if (cellValue <= 100 ) {
                            return "max";
                        }                        
                        return "min";                    
                }
            }
            // create jqxDataTable.
            $("#Mapped").jqxGrid(
            {
                source: dataAdapter,
                width: '99%',
                groupable: true,
                sortable: true,
                autoheight:true,
                editable: true,
                columnsresize: true,

                
                columns: [
                  { text: 'File Name', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'center', dataField: 'File_Name',/* pinned: true,*/  width: '11%', pinned: true },
                  { text: 'Asset ID', cellsAlign: 'left',columngroup: 'ProductDetails', align: 'center', dataField: 'Asset_ID', width: '12%', pinned: true },
                  { text: 'Trade ID', dataField: 'Trade_ID',columngroup: 'ProductDetails', cellsformat: 'c2', align: 'center', cellsAlign: 'left', minWidth: 100, pinned: true  },
                  { text: 'TimeStamp',columngroup: 'ProductDetails', dataField: 'TimeStamp', cellsformat: 'd', cellsAlign: 'left', align: 'center' ,minWidth: 90 , width: '10%', pinned: true },
                  { text: 'Field Name', cellsAlign: 'center', align: 'center', dataField: 'Field_Name', width: '10%',minWidth: 100 , pinned: true },
                  { text: 'Action', cellsAlign: 'center', align: 'center', dataField: 'Action', width: '10%', minWidth: 100, pinned: true  },
                  { text: 'Error', cellsAlign: 'center', columntype: 'datetimeinput', align: 'center', dataField: 'Error', formatString: 'd', width: '8%', minWidth: 80 }
                  }
                ]
            });  
        });
    </script>


</head>
<body class="page-body" >


    <div class="page-container white page-left-in">

       <div class="sidebar-menu">  
            <header class="logo-env">
                <div class="logo">
                    <a href="index.html">
                        <img src="../assets/images/logo@2x.png" width="120" alt="" />
                    </a>
                </div>  
                <div class="sidebar-collapse">
                    <a href="#" class="sidebar-collapse-icon with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
                <div class="sidebar-mobile-menu visible-xs">
                    <a href="#" class="with-animation">
                        <i class="entypo-menu"></i>
                    </a>
                </div>
            </header>

            <div class="sidebar-user-info">
                <div class="sui-normal">
                    <a href="#" class="user-link">
                        <img src="../assets/images/thumb-1.png" alt="" class="img-circle" />
                        
                        <span>Welcome,</span>
                        <strong>Danny Murphy </strong>
                    </a>
                </div>
                <div class="sui-hover inline-links animate-in">         
                    <a href="lockscreen.html">
                        <i class="entypo-lock"></i>
                        Lock Screen
                    </a>
                    <a placeholder="fullscreen" href="javascript:" onclick="toggleFullScreen()">
                        <i class="entypo-export"></i>
                        Full Screen
                      </a>
                    
                    <span class="close-sui-popup">&times;</span><!-- this is mandatory -->          
                </div>
            </div>
            
            <ul id="main-menu" >
                <li id="search" class="">
                    <form action="" method="get">
                        <input type="text" placeholder="Search something..." class="search-input" name="q">
                        <button type="submit">
                            <i class="entypo-search"></i>
                        </button>
                    </form>
                </li>
                <li >
                    <a data-close-others="true" class="dropdown-toggle" href="dashboard_admin.html">
                        <i class="entypo-gauge"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
                 <li >
                    <a data-close-others="true" class="dropdown-toggle" href="file-monitor.html">
                        <i class="entypo-monitor"></i>
                        <span>File Monitor</span>
                    </a>
                   <!--  <ul >
                        <li>
                            <a href="file-monitor.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                           <a href="#" onclick='window.open("file-monitor.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul> -->
                    
                </li>
                 <li>
                    <a data-close-others="true" class="dropdown-toggle" href="trade_monitor.html">
                        <i class="entypo-volume"></i>
                        <span>Trade Monitor</span>
                    </a>
                   <!--  <ul>
                        <li>
                            <a href="trade_monitor.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick='window.open("trade_monitor.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul> -->
                    
                </li>
                 <li>
                    <a data-close-others="true" class="dropdown-toggle" href="recon.html">
                         <i class="glyphicon glyphicon-usd"></i>
                        <span>Recon</span>
                    </a>

                   <!--  <ul>
                        <li>
                            <a href="recon.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick='window.open("recon.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul> -->
                </li>

                <li class="active">
                    <a data-close-others="true" class="dropdown-toggle" href="reports.html">
                           <i class="entypo-chart-pie"></i>
                        <span>Reporting</span>
                    </a>

                   <!--  <ul>
                         <li>
                            <a href="reports.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                           <a href="#" onclick='window.open("reports.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul> -->
                </li>
                <li >
                    <a data-close-others="true" class="dropdown-toggle" href="reference-data.html">
                        <i class="glyphicon glyphicon-user"></i>
                        <span>Reference Data</span>
                    </a>
                   <!--  <ul>
                        <li>
                            <a href="reference-data.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick='window.open("reference-data.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul>   -->
                </li>
                <li >
                    <a data-close-others="true" class="dropdown-toggle" href="workflow-panel.html">
                        <i class="entypo-doc-text-inv"></i>
                        <span>Tasks</span>
                    </a>
                    <!-- <ul>
                        <li>
                            <a href="workflow-panel.html">
                                <span> Open Same Window </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick='window.open("workflow-panel.html", "New Window", "height=1500,width=1500");'>
                                <span> Open New Window </span>
                            </a>
                        </li>

                    </ul>   -->
                </li>
                <li >
                        <a  class="" href="Settlement.html">
                               <i class="entypo-docs"></i>
                            <span>Settlements </span>
                        </a>
                </li>
                <li >
                        <a data-close-others="true" class="" href="confirmations.html">
                               <i class="entypo-check"></i>
                            <span>Confirmations </span>
                        </a>
                </li>
                 <li >
                    <a data-close-others="true" class="dropdown-toggle" href="#">
                        <i class="entypo-plus"></i>
                        <span>Add</span>
                    </a>
                    <ul class="" style="opacity: 0.2; height: 0px;">
                        <li>
                            <a href="#" data-target="#clientModal" data-toggle="modal" class="">
                            Add Client 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#ManagerModal" data-toggle="modal" class="">
                            Add Manager 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#fundsModal" data-toggle="modal" class="">
                            Map Funds 
                            </a>
                        </li>
                        <li>
                            <a href="#" data-target="#tradefundModal" data-toggle="modal" class="">
                            Trade Map Funds 
                            </a>
                        </li>
                        <!-- <li>
                            <a href="#" data-target="#tradefundModal" data-toggle="modal" class="">
                            Add Task 
                            </a>
                        </li> -->

                    </ul>  
                </li>
            </ul>        
        </div>

        <div class="main-content reports">
        <div class="row">

            <!-- Profile Info and Notifications -->
            <div class="col-md-6 col-sm-8 ">                
                <ul class="user-info pull-left ">

                    <ul class="user-info pull-left pull-right-xs pull-none-xsm">

                        <!-- Task Notifications -->
                        <li class="notifications dropdown">
                            
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                <i class="entypo-list"></i>
                                <span class="badge badge-warning">6</span>
                            </a>
                            
                            <ul class="dropdown-menu">
                                <li class="top">
                                    <p>You have 6 pending tasks</p>
                                </li>

                                <li>
                                    <ul class="dropdown-menu-list scroller">
                                        <li>
                                            <a href="#">
                                                <span class="task">
                                                    <span class="desc">Recon</span>
                                                    <span class="percent">1</span>
                                                </span>
                                            
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="task">
                                                    <span class="desc">File Handling</span>
                                                    <span class="percent">2</span>
                                                </span>
                                                
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="task">
                                                    <span class="desc">Reporting</span>
                                                    <span class="percent">1</span>
                                                </span>
                                                
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="task">
                                                    <span class="desc">Notification</span>
                                                    <span class="percent">2</span>
                                                </span>
                                                
                                            </a>
                                        </li>
                                    </ul>
                                </li>

                                <li class="external">
                                    <a href="workflow-panel.html">See all tasks</a>
                                </li>               
                            </ul>
                            
                        </li>
                    </ul>
                </ul>        
            </div>

            <div class="col-md-6 col-sm-4 ">

                <ul class="list-inline links-list pull-right">
                    <li>
                        <a href="user-preference.html">
                        <i class="entypo-cog right"></i>
                       User Preferences
                        </a>
                    </li>
                            <li class="sep"></li>
                    <li>
                        <a onclick="window.location = 'sip:person@domain.com'" href="#"><i class="entypo-chat"></i> Lync</a>
                        <span class="badge badge-info">10</span>
                    </li>

                    <li class="sep"></li>

                    <li>
                        <a href="../login.html">
                            Log Out <i class="glyphicon glyphicon-off  right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>
        <hr/>
        <div class="row">
            <div class="col-md-12">
                <div id="Mapped" style="clear:both; margin:20px 0;"></div>
            </div>
        </div>
        <footer class="site-footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-sm-2">
                                <a class="about" href="about.html">about us</a>
                            </div>
                            <div class="col-sm-2">
                                <a class="contact" href="#">contact us</a>
                            </div>
                            <div class="col-sm-4 center1">
                                <p>Copyright &copy; 2014 by ezops. All rights reserved.</p>
                            </div>
                            <div class="col-sm-4">
                                <div class="social-icon pull-right">
                                    <ul>
                                        <li><a class="google" href="#"></a></li>
                                        <li><a class="linkdin" href="#"></a></li>
                                        <li><a class="twitter" href="#"></a></li>
                                        <li><a class="facebook" href="#"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        </div>
        <!-- Site Footer -->

    </div>

    <!-- Modal Client -->
    <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Client</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">First Name</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Last Name</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Last Name">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Profession</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Profession">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Contact No.</label>
                        <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Contact No.">
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Manager -->
    <div class="modal fade" id="ManagerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add Manager</h4>
          </div>
          <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="exampleInputEmail1">First Name</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Last Name</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Profession</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Profession">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Contact No.</label>
                    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Contact No.">
                </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Map Funds -->
    <div class="modal fade" id="fundsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Map Funds</h4>
          </div>
            <div class="modal-body">
                 <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Client</h4>
                        <select class="form-control select1" >
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Manager</h4>
                        <select class="form-control select1">
                            
                            <option>ABC</option>
                            <option>DEF</option>
                            <option>DEMO</option>
                            <option>SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4> Funds</h4>
                        <select class="form-control select1">
                           
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values">Map</button>
                      <div id="result"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Map Funds -->
    <div class="modal fade" id="tradefundModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Trade Map Funds</h4>
          </div>
            <div class="modal-body">
               <form role="form">
                    
                    <div class="form-group">
                      <div class="fund-section">
                        <h4>Trade File</h4>
                        <select class="form-control select3">
                          
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Data Point</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Inbound Mapping</h4>
                        <select class="form-control select3">
                            
                            <option value="1">ABC</option>
                            <option value="2">DEF</option>
                            <option value="3">DEMO</option>
                            <option value="4">SARVA</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="fund-section">
                        <h4>Outbound Mapping</h4>
                        <select class="form-control select3">
                            <option>Funds</option>
                            <option>ABC LS Fund</option>
                            <option>ABC EM Fund</option>
                            <option>ABC Arb Fund</option>
                            <option>DEF World Marco Fund</option>
                            <option>DEMO LS Fund</option>
                            <option>DEMO Stat Arb Fund</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-red" id="select-values1">Map</button>
                       <div id="result1"></div>
                    </div>
                </form>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div> 
     <!-- Modal Reports table -->
    <div class="modal fade" id="AgingReportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Aging Report</h4>
            </div>
            <div class="modal-body">
                
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

  

    <link rel="stylesheet" href="../assets/js/daterangepicker/daterangepicker-bs3.css">
    <link rel="stylesheet" href="../assets/js/rickshaw/rickshaw.min.css">
        <script src="../assets/js/rickshaw/vendor/d3.v3.js"></script>
        <script src="../assets/js/rickshaw/rickshaw.min.js"></script> 
        <script src="../assets/js/jquery.sparkline.min.js"></script>

    <!-- Bottom Scripts -->
    <script src="../assets/js/gsap/main-gsap.js"></script>
    <script src="../assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"></script>
    <script src="../assets/js/bootstrap.js"></script>
    <script src="../assets/js/joinable.js"></script>
    <script src="../assets/js/resizeable.js"></script>
    <script src="../assets/js/neon-custom.js"></script>
    <script src="../assets/js/neon-demo.js"></script>
    <script src="../assets/js/neon-api.js"></script>
    <script src="../assets/js/highcharts.js"></script>
    <script src="../assets/js/exporting.js"></script>
    <script src="../assets/js/daterangepicker/moment.min.js"></script>
    <script src="../assets/js/daterangepicker/daterangepicker.js"></script>

    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                // Build the chart4
                $('#containerpie2').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['JPM', 323],
                            ['CS', 171],   
                            ['Citi',  4], 
                            ['MS', 23],
                            ['GS', 5]  
                            
                        ]
                    }]
                });
            });
            
        });
        $(function () {
                    var chart;
                    $(document).ready(function () {
                        // Build the chart4
                        $('#containerpie1').highcharts({
                            chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false
                            },
                            title: {
                                text: ''
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: false
                                    },
                                    showInLegend: true
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Browser share',
                                data: [
                                    ['Confirmed < T+2 ', 200],
                                    ['Confirmed < T+5', 300],   
                                    ['Confirmed < T+30',  24], 
                                    ['Confirmed > T+30', 2]
                                   
                                    
                                ]
                            }]
                        });
                    });
                    
        });
        
        $(function () {
            $('#containerproduct').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: [
                        'CFD',
                        'CDS',
                        'Futures',
                        'IRS',
                        'Bonds',
                        'Eq Options'
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Product',
                    data: [267.0, 112.0, 48.0, 24.0, 45.0, 30.0]
        
                }]
            });
        });
        $(function () {
        $('#containerpie4').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [
                    'Equity',
                    'Eq Swaps',
                    'CDS',
                    'Futures'
                   
                   
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'RISK REPORTING',
                data: [10, 69, 21, 110]
    
            }]
        });
        });
        
        // Add jS Dropdown plugin

       $(".dropdown dt a").on('click', function () {
          $(".dropdown dd ul").slideToggle('fast');
      });

      $(".dropdown dd ul li a").on('click', function () {
          $(".dropdown dd ul").hide();
      });

      function getSelectedValue(id) {
           return $("#" + id).find("dt a span.value").html();
      }

      $(document).bind('click', function (e) {
          var $clicked = $(e.target);
          if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
      });


        $( document ).ready(function() {
            $('.reportFilter input[type="checkbox"]').on('click', function () {

                var panelId = $(this).val();


                if ($(this).is(':checked')) {
                    $('#'+panelId).show('slow')
                } else {
                     $('#'+panelId).hide('slow')

                }
            });
        });


          $("#select-values").click(function () {
            var option_all = $(".select1 option:selected").map(function () {
                return $(this).text();
            }).get().join(' ... ');
            console.log(option_all);
            var heading= 'Selected Mapping: ';            
            $('#result').text(heading + option_all);
        });

          $("#select-values1").click(function () {
            var option_all = $(".select3 option:selected").map(function () {
                return $(this).text();
            }).get().join(' ... ');
            console.log(option_all);
            var heading= 'Selected Mapping: ';            
            $('#result1').text(heading + option_all);
        });
    </script>
    <script type="text/javascript">
        $("#downloadbut").click(function(){
            $cfile = "path/to/filename.csv";
            header('Content-Type: text/csv; charset=utf-8');
            header('Content-Disposition: attachment; filename="filename.csv"');
            @readfile($cfile);
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function($) 
        {
            // Sample Toastr Notification
            setTimeout(function()
            {           

                toastr.success("You have been awarded with 1 year free subscription. Enjoy it!", "Account Subcription Updated", opts);
            }, 3000);
            
            
            // Sparkline Charts
            $('.inlinebar').sparkline('html', {type: 'bar', barColor: '#ff6264'} );
            $('.inlinebar-2').sparkline('html', {type: 'bar', barColor: '#445982'} );
            $('.inlinebar-3').sparkline('html', {type: 'bar', barColor: '#00b19d'} );
            $('.bar').sparkline([ [1,4], [2, 3], [3, 2], [4, 1] ], { type: 'bar' });
            $('.pie').sparkline('html', {type: 'pie',borderWidth: 0, sliceColors: ['#3d4554', '#ee4749','#00b19d']});
            $('.linechart').sparkline();
            $('.pageviews').sparkline('html', {type: 'bar', height: '30px', barColor: '#ff6264'} );
            $('.uniquevisitors').sparkline('html', {type: 'bar', height: '30px', barColor: '#00b19d'} );

            // Rickshaw
            var seriesData = [ [], [] ];
            
            var random = new Rickshaw.Fixtures.RandomData(50);
            
            for (var i = 0; i < 50; i++) 
            {
                random.addData(seriesData);
            }
            
            var graph = new Rickshaw.Graph( {
                element: document.getElementById("rickshaw-chart-demo"),
                height: 193,
                renderer: 'area',
                stroke: false,
                preserve: true,
                series: [{
                        color: '#73c8ff',
                        data: seriesData[0],
                        name: 'Upload'
                    }, {
                        color: '#e0f2ff',
                        data: seriesData[1],
                        name: 'Download'
                    }
                ]
            } );
            
            graph.render();
            
            var hoverDetail = new Rickshaw.Graph.HoverDetail( {
                graph: graph,
                xFormatter: function(x) {
                    return new Date(x * 1000).toString();
                }
            } );
            
            var legend = new Rickshaw.Graph.Legend( {
                graph: graph,
                element: document.getElementById('rickshaw-legend')
            } );
            
            var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
                graph: graph,
                legend: legend
            } );
            
            setInterval( function() {
                random.removeData(seriesData);
                random.addData(seriesData);
                graph.update();
            
            }, 500 );
        });


        function getRandomInt(min, max) 
        {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        </script>

</body>
</html>